// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import Vuex from 'vuex'
import 'es6-promise/auto'
Vue.use(Vuex)
//每次刚进入网站，肯定会调用main。js，在刚调用的时候，先读取本地数据，放到store中
var car=JSON.parse(localStorage.getItem('car') || '[]');
var store = new Vuex.Store({
  state:{
    car:car,
  },
  mutations: {
    addToCar(state,goodsinfo){
      //点击加入购物车，把商品信息加入到store里面
      //分析
      //1.如果购物车里边已经有这个商品了，更新数量就完事了
      //2.如果没，则直接把商品数据push到car中
      var flag=false;//假设在购物车中没有找到对应的商品

      state.car.some(item=>{
        if (item.id==goodsinfo.id) {
          item.count +=parseInt(goodsinfo.count);
          flag= true;
          return true;
        }
      })
      if(!flag){
        state.car.push(goodsinfo);
      }
      //当更新car之后，把car数组，存储到本地的localstorage中
      localStorage.setItem('car',JSON.stringify(state.car))
    },
    updateGoodsInfo(state,goodsinfo) {
      // console.log(state.car)
    // console.log(store.state.car)
      //修改购物车中的数量
      state.car.some(item=>{
        if(item.id==goodsinfo.id){
          item.count=parseInt(goodsinfo.count);
          return true;
        }
      })
      // 当修改完商品数量把最新的数据保存到本地
      localStorage.setItem('car',JSON.stringify(state.car))
    },
    removeForCar(state,id){
            // 根据Id，从store 中的购物车中删除对应的那条商品数据
      state.car.some((item,i)=>{
        if (item.id==id) {
          state.car.splice(i,1);
          return true;
        }
      })
        // 将删除完毕后的，最新的购物车数据，同步到 本地存储中
        localStorage.setItem('car',JSON.stringify(state.car))
    },
    updateGoodsSelected(state,info){
      state.car.some(item=>{
        if (item.id==info.id) {
          item.selected=info.selected
        }
      })
      // 把最新的 所有购物车商品的状态保存到 store 中去
      localStorage.setItem('car', JSON.stringify(state.car))
    }
  },
  getters: {

    getAllCounts(state){
      var c=0;
      state.car.forEach(item=>{
        c+=item.count;
      })
      return c;
    },
    getGoodsSelect(state){
      var o = {}
      state.car.forEach(item => {
        o[item.id] = item.selected//当前id是否被选中 
      })
      return o
    },
    getGoodsCountAndAmount(state){
        var o={
          count:0,//勾选的数量
          amount:0//勾选的总价
        }
        state.car.forEach(item=>{
          if (item.selected) {
            o.count+=item.count
            o.amount+=item.count * item.price
          }
        })
        return o;
    }
  }
})
// 导入图片预览插件
import VuePreview from 'vue-preview'
// defalut install
Vue.use(VuePreview)

// with parameters install
// Vue.use(preview, {
//   mainClass: 'pswp--minimal--dark',
//   barsSize: {top: 0, bottom: 0},
//   captionEl: false,
//   fullscreenEl: false,
//   shareEl: false,
//   bgOpacity: 0.85,
//   tapToClose: true,
//   tapToToggleControls: false
// })


// 导入bootstrap样式
import 'bootstrap/dist/css/bootstrap.min.css'
import 'bootstrap/dist/js/bootstrap.min.js'

// 导入所有的 MIntUI 组件
// 导入 Mint-UI
import MintUI from 'mint-ui' // 把所有的组件都导入进来 这里 可以省略 node_modules 这一层目录
// 导入 MUI 的样式表， 和 Bootstrap 用法没有差别
import 'mint-ui/lib/style.css'
import './lib/MUI/css/mui.css'
// 导入图标扩展类
import './lib/MUI/css/icons-extra.css'
//  导入 vue-resource
import VueResource from 'vue-resource'
// 导入时间插件
import moment from 'moment'
// 定义全局的过滤器
Vue.filter('dateFormat', function (dataStr, pattern = 'YYYY-MM-DD HH:mm:ss') {
  return moment(dataStr).format(pattern)
})

// 把所有的组件，注册为全局的组件
Vue.use(MintUI)

//  安装 vue-resource
Vue.use(VueResource)
// 设置请求的根路径
Vue.http.options.root = 'http://47.89.21.179:8080'
// 全局设置 post 时候表单数据格式组织形式   application/x-www-form-urlencoded
Vue.http.options.emulateJSON = true;
// 关闭生产模式下给出的提示
Vue.config.productionTip = false;


/* eslint-disable no-new */

new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>',
  store//挂载store实例

})
